<template>
  <n-spin class="yzspin" :show="val.show2">
    <template #description>
      <div class="yzdiv"><br />{{ val.loading_text }}</div></template
    >

    <div class="top_div" style="justify-content: center">
      <tempalte v-for="icon in val.save_icon?.split(',')">
        <img style="width: 35px" :src="cfg.function.ava(icon)" />
      </tempalte>
    </div>

    <n-hr />
    <n-space justify="center" style="margin-top: 1rem"
      ><n-h3>等级 {{ val.pt_level }}</n-h3></n-space
    >

    <div
      style="
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 12.5px;
        justify-content: center;
        gap: 12px;
      "
    >
      <n-infinite-scroll
        style="height: calc(100vh - 230px)"
        :distance="10"
        @load="ct.click_player_all_top_inf"
      >
        <div
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            font-size: 12.5px;
            justify-content: center;
            gap: 12px;
          "
        >
          <template v-for="item in val.pt2_data">
            <div class="player_alllist">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: 3px;
                "
              >
                <div style="display: flex; align-items: center; gap: 5px">
                  <template v-if="item.top <= 3">
                    <img :src="`${cfg.cdn2}?file=img/star1.png`" />
                  </template>
                  <template v-else-if="item.top >= 3 && item.top <= 20">
                    <img :src="`${cfg.cdn2}?file=img/star2.png`" />
                  </template>
                  <template v-else-if="item.top >= 21 && item.top <= 100">
                    <img :src="`${cfg.cdn2}?file=img/star3.png`" />
                  </template>
                  <template v-else-if="item.top >= 101 && item.top <= 200">
                    <img :src="`${cfg.cdn2}?file=img/star4.png`" />
                  </template>
                  <template v-else-if="item.top >= 201">
                    <img :src="`${cfg.cdn2}?file=img/star5.png`" />
                  </template>
                  <span style="font-size: 12px">{{ item.top }}</span>
                  <span style="font-size: 12px">{{ item.user }}</span>
                </div>
                <div>
                  <n-button
                    size="small"
                    @click="ct.player_dao(item.uid, val.qs.season, item.bid)"
                    >查刀</n-button
                  >
                </div>
              </div>

              <n-hr />
              <span style="text-align: center; color: var(--base-font-hover-color)"
                >伤害 {{ item.damage?.toLocaleString() }}</span
              >
            </div>
          </template>
        </div>
      </n-infinite-scroll>
    </div>
  </n-spin>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    const ct = props.ct;
    const val = props.val;
    onMounted(() => {
      ct.click_player_all_top_inf();
    });

    return {
      ct,
      val,
      cfg,
    };
  },
};
</script>
